System for conversion of website content

ABSTRACT

A system and method for converting website content is presented. Design elements in a graphical representation of a web page are identified. The design elements are ordered according to a position of each of the design elements with respect to a top of the graphical representation of the web page. One or more of the ordered design elements are grouped into one or more groups of design elements, and the design elements are stacked by rearranging each group of design elements into a single column. The single column of the groups of design elements are rendered into a converted web page for display on a device. In one implementation, the device is a mobile device.

CROSS-REFERENCE TO RELATED APPLICATIONS

This application is a continuation of U.S. patent application Ser. No.13/796,760, filed on Mar. 12, 2013, and entitled “SYSTEM FOR CONVERSIONOF WEBSITE CONTENT”, which claims priority to U.S. Provisional PatentApplication No. 61/755,918, filed on Jan. 23, 2013, and entitled“CONVERTING AND TRANSFERRING WEBSITES.”.

This application is related to U.S. patent application Ser. No.13/797,153, filed on Mar. 12, 2013, and entitled “METHOD FOR CONVERSIONOF WEBSITE CONTENT.”

FIELD OF THE INVENTION

The present invention generally relates to website design andcommunication, and more specifically, the present invention relates tosystems and methods for efficiently and effectively providing websiteand website information to various requesters having differingoperational constraints.

BACKGROUND OF THE INVENTION

The Internet comprises a vast number of computers and computer networksthat are interconnected through communication links. The interconnectedcomputers exchange information using various services. In particular, aserver computer system, referred to herein as a web server, may connectthrough the Internet to a remote client computer system, referred toherein as a requesting device. The requesting device may request andreceive, from the web server, websites containing one or more graphicaland textual web pages of information. A request is made by visiting thewebsite's address, known as a Uniform Resource Locator (“URL”). Uponreceipt, the requesting device can display the web pages. The requestand display of the websites are typically conducted using a browser. Abrowser is a special-purpose application program that effects therequesting of web pages and the displaying of web pages.

The information on web pages is in the form of programmed source codethat the browser interprets to determine what to display on therequesting device. The source code may include document formats,objects, parameters, positioning instructions, and other code that isdefined in one or more web programming or markup languages. One webprogramming language is HyperText Markup Language (“HTML”), and all webpages use it to some extent. HTML uses text indicators called tags toprovide interpretation instructions to the browser. The tags specify thecomposition of design elements such as text, images, shapes, hyperlinksto other web pages, programming objects such as JAVA applets, formfields, tables, and other elements. By default, the browser processesHTML instructions in the order they are listed, so that elements appearon the web page according to the HTML processing flow. HTML can be usedto establish design element positioning in combination with CascadingStyle Sheets (“CSS”) or a number of other technologies to ascribe eithera relative or an absolute position of the element on the web page, asdepicted on the requesting device. Relative positioning of an elementretains the element within the HTML processing flow, simply moving theelement a proscribed number of pixels horizontally or vertically awayfrom the place the element otherwise would have appeared. In contrast,absolute positioning places the element a proscribed number of pixelsfrom the top-left (or top-right in countries with right-to-left readingdirection) corner of the web page. The element is removed from the HTMLprocessing flow of the web page. The location of such an absolutelypositioned element does not vary with page width and does not affect thepositioning of elements around the element.

The display parameters of requesting devices may vary widely due todifferences in screen size, resolution, processing power, and maximumdownload speeds. Formatting the web page to be properly displayed acrossa large number of requesting devices with different display parametersand bandwidth is a primary concern for web page designers. Historically,the most effective way to address this concern has been for the web pagedesigner to manually create different formatting and style layouts foreach expected set of requesting device parameters. For example, adesigner would create a first web page to be displayed within a browserwindow on a standard computer monitor set at 1600×1200 resolution andusing mouse and keyboard input for navigation. The designer would thencreate a second web page having the same or similar content as the firstweb page, but being formatted for display on a mobile device, such as asmart phone or tablet, which has a relatively constrained screen sizeand touch-screen navigation. This manual approach excessively duplicatesdesign work and, due to the hard-coded formatting of each page, issusceptible to changes in requesting device display parameters. Anautomated web page conversion process that accommodates any requestingdevice would be advantageous.

One known programming approach, referred to as responsive web design(“RWD”), addresses this concern in some computing environments. RWD usesa particular set of programming language function calls to adapt the webpage to the width and resolution of the requesting device's display.Such adaptation may include repositioning, resizing, and even completelyeliminating design elements in order to fit the content into a newlayout that accommodates the display. Unless adaptive layout decisionsare made in advance by the web designer, thus obviating some automationof the processing, RWD may compromise the functional and informationalgoals of the web page as well as its aesthetic goals. Furthermore, RWDreformatting is particularly ill-suited for adapting web pages employingabsolute positioning of elements because the reformatting is primarilydetermined by the width of the browser window, which does not affectabsolutely-positioned elements.

BRIEF DESCRIPTION OF THE DRAWINGS

FIG. 1 is schematic diagram of a system and associated operatingenvironment in accordance with the present disclosure.

FIG. 2 is a schematic illustration of a web page having a plurality ofelements intended to be displayed on a device with substantialresources.

FIG. 3 is a flow diagram of a method for converting a web page intendedto be displayed on a device with substantial resources into a web pageintended to be displayed on a device with constrained resources.

FIG. 4 is a schematic illustration of identifying the elements of theweb page of FIG. 2.

FIG. 5 is a schematic illustration of grouping the elements of the webpage of FIG. 2.

FIG. 6 is a schematic illustration of moving the groups of elements ofthe web page of FIG. 2.

FIG. 7 is a schematic illustration of stacking the groups of elements ofthe web page of FIG. 2.

FIG. 8 is a schematic illustration of separating overlapping elements ofa group.

FIG. 9 is a schematic illustration of a web page converted from the webpage of FIG. 2, including a primary navigation interface, and having aplurality of elements intended to be displayed on a requesting devicewith constrained resources.

FIG. 10 is a schematic illustration of a website builder interface.

DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENT

The present invention overcomes the aforementioned drawbacks byproviding a system and method for the conversion of a web page that isintended to be displayed on a requesting device with substantialresources into a web page that is intended to be displayed on arequesting device with constrained resources. The web server tasked withserving the web page to requesting devices, also known as a hostingprovider, may perform one or more algorithms for the conversion.Alternatively, the web server may assign the conversion to a relatedcomputer system, such as another web server, collection of web or otherservers, a dedicated data processing computer, or another computercapable of performing the conversion algorithms. In some cases, therequesting device will request and receive conventional web page dataand then perform the conversion at the requesting device to convert theconventional web page into a web page more suited for display by therequesting device. For example, a web page renderer or layout engineoperative on the requesting device may be configured to implement thepresent conversion method after a web page has been retrieved from a webserver. For clarity of explanation, and not to limit the implementationof the present methods, the methods are described below as beingperformed by a web server that serves the web page to requestingdevices. The conversion is described with a left-sided prioritizationfor left-to-right reading countries; it will be understood that left andright directions may be reversed for countries that read fromright-to-left.

When performing the conversion, the web server evaluates the web pagecontent as depicted in the web page's final graphical layout, ratherthan with respect to its source code. This enables the web server toconvert the web page as described below while retaining the contextualsignificance of the web page elements, even if those elements are fixedor absolutely positioned on the web page. According to the methodsdescribed herein, the web server identifies the set or a subset of thedesign elements contained in the web page. The design elements are thensorted into a number of groups, based upon a number of criteria, asdescribed below. Once the various design elements have been grouped, thegroups of design elements can then be reorganized so as to be moreappropriately positioned for display on the requesting device. When therequesting device is a mobile device, for example, having a limiteddisplay size, the groups of design elements may be rearranged so as tobe more easily viewed on the mobile device. Similarly, design elementsthat include user interface elements, such as links, buttons, and thelike, may be modified (e.g., by making the user interface elementslarger, or more separated from one another) so as to be more easilyaccessible when the user interface elements are accessed using a touchscreen display of a mobile requesting device.

In one implementation, the present invention is a system comprising aprocessor configured to identify design elements in a graphicalrepresentation of a web page, order the design elements according to aposition of each of the design elements with respect to a top of thegraphical representation of the web page, and group one or more of theordered design elements into one or more groups of design elements. Theprocessor is configured to stack the design elements by rearranging eachgroup of design elements into a single column, and render the singlecolumn of the groups of design elements into a converted web page fordisplay on a device.

In another implementation, the present invention is a system comprisinga processor configured to identify design elements in a graphicalrepresentation of a web page, order the design elements according to aposition of each of the design elements with respect to a top of thegraphical representation of the web page, and group one or more of theordered design elements into one or more groups of design elements. Theprocessor is configured to stack the design elements in a single column,by moving each group of design elements to the left in the graphicallayout of the webpage until the group being moved contacts a left sideof the graphical layout of the web page or another group of designelements, and, upon contact with another group of design elements,placing the group being moved below the contacted group of designelements. The processor is configured to render the single column of thedesign elements into a converted web page for display on a device.

In another implementation, the present invention is a non-transitorycomputer-readable storage media storing instructions that, when executedby at least one computing device, cause the at least one computingdevice to identify design elements in a graphical representation of aweb page, order the design elements according to a position of each ofthe design elements with respect to a top of the graphicalrepresentation of the web page, and group one or more of the ordereddesign elements into one or more groups of design elements. Theinstructions cause the at least one computing device to stack the designelements by rearranging each group of design elements into a singlecolumn, and render the single column of the groups of design elementsinto a converted web page for display on a device.

In another implementation, the present invention is a method comprisingidentifying design elements in a graphical representation of a web page,ordering the design elements according to a position of each of thedesign elements with respect to a top of the graphical representation ofthe web page, and grouping one or more of the ordered design elementsinto one or more groups of design elements. The method includes stackingthe design elements by rearranging each group of design elements into asingle column, and rendering the single column of the groups of designelements into a converted web page for display on a device.

In another implementation, the present invention is a method comprisingidentifying design elements in a graphical representation of a web page,ordering the design elements according to a position of each of thedesign elements with respect to a top of the graphical representation ofthe web page, and grouping one or more of the ordered design elementsinto one or more groups of design elements. The method includes stackingthe design elements in a single column by moving each group of designelements to the left in the graphical layout of the webpage until thegroup being moved contacts a left side of the graphical layout of theweb page or another group of design elements, and, upon contact withanother group of design elements, placing the group being moved belowthe contacted group of design elements. The method includes renderingthe single column of the design elements into a converted web page fordisplay on a device.

In another implementation, the present invention is a method forgenerating a converted web page comprising receiving a request for a webpage from a requesting device having a first display. The web page isdesigned to be served to a requesting device having a second display. Awidth of the second display is greater than a width of the firstdisplay. The method includes identifying one or more design elements ina graphical layout of the web page, ordering the design elementsaccording to a proximity of each of the design elements to a top of thegraphical depiction of the web page, and grouping one or more of theordered design elements into one or more groups of design elementsaccording to a column layout. The method includes stacking the designelements by rearranging each group of design elements into a singlecolumn, and setting a primary navigation interface by identifying one ormore navigation elements on the web page, determining which of theidentified one or more navigation elements are primary navigationelements, and inserting one or more of the primary navigation elementsinto the primary navigation interface. The method includes rendering thesingle column of the design elements into the converted web page, andrendering the primary navigation interface into the converted web page.

Rendering of the converted web page may take into account particularformatting rules or other rendering limitations for particular types ofweb page elements, examples of which are described below. The web servermay create a primary navigation interface for the converted web page byscanning the original web page for navigation elements, designating asprimary navigation elements the navigation elements with the mostvisible links, removing the primary navigation elements from therendering process, and formatting and displaying some or all of theprimary navigation elements as a static primary navigation interface onthe converted web page.

Referring to FIG. 1, a requesting device with substantial resources 110and a requesting device with constrained resources 120 are configured tocommunicate over the Internet with a web server 100 and may request oneor more web pages 200 from the web server 100. In variousimplementations the web server 100, and requesting devices are computingdevices, such as server computers, desktop or portable computers, mobiledevices, distributed computing services, and the like. The requestingdevices 110, 120 may request the web pages 200 using any electroniccommunication medium, communication protocol, and computer softwaresuitable for transmission of data over the Internet. Examples include,respectively and without limitation: a wired connection, WiFi or otherwireless network, cellular network, or satellite network; TransmissionControl Protocol and Internet Protocol (“TCP/IP”), Global System formobile Communications (“GSM”) protocols, code division multiple access(“CDMA”) protocols, and Long Term Evolution (“LTE”) mobile phoneprotocols; and web browsers such as MICROSOFT INTERNET EXPLORER, MOZILLAFIREFOX, and APPLE SAFARI.

A requesting device with substantial resources 110 may be any requestingdevice for which web pages are typically designed without concern fordisplay, user interface, processing, or Internet bandwidth limitations.Such requesting devices 110 include, without limitation, personal andworkplace computing systems such as desktops, laptops, and thin clients,each with a monitor or built-in large display. A requesting device withconstrained resources 120 may be any requesting device that cannotdisplay the informational and functional content of web pages that aredesigned for viewing on personal computers and other requesting deviceswith substantial resources 110. Such requesting devices 120 includemobile devices such as mobile phones and tablet computers, and mayfurther include other similarly limited devices for which conventionalwebsites are not ordinarily designed. Mobile devices, and mobile phonesin particular, have a significantly smaller display size than personalcomputers, and may further have significantly less processing power and,if receiving data over a cellular network, significantly less Internetbandwidth. In one embodiment, the requesting device with constrainedresources 120 is a mobile phone having a display on which the originalweb page 200 cannot be satisfactorily displayed.

The web page 200 is designed primarily to be displayed on a monitor orother large display of a requesting device with substantial resources110, and the web server 100 may serve the web page 200 to suchrequesting devices 110 without modification. The web server 100 includesa conversion algorithm 105 that the web server 100 uses as describedbelow to convert the web page 200 so that it may be displayed moreappropriately on a requesting device with constrained resources 120. Theweb server 100 may convert the web page 200 before any such requestingdevice 120 requests the web page 200, and may store a converted versionof the web page 200 for serving to such requesting devices 120. Forexample, the web server 100 may both create the original web page 200and convert the web page 200 with the conversion algorithm 105 when thecreator of the web page 200 requests publication of the web page 200 toa website that is accessible over the internet. In addition oralternatively, the web server 100 may convert the web page 200 uponreceiving a request for the web page 200 from one or more such devices120. The web server 100 may store or destroy the converted version afterserving the converted version as requested.

In one embodiment, both the original and converted versions of the webpage 200 may be served at the same URL. The web server 100 may determinewhether the request for the web page 200 is from a requesting devicewith substantial resources 110 or a requesting device with constrainedresources 120 before servicing the request. The web server 100 maydetect the type of requesting device 110, 120, the type of browser, oranother indicator to determine how to handle the request. For example,the web server 100 may inspect a user-agent string provided by therequesting device 110, 120 to identify one or more attributes of therequesting device 110, 120. Those attributes (such as operating system,browser, central processing unit (CPU), and the like) can then be usedto determine the type of requesting device 110, 120 and, thereby, theversion of the web page 200 to serve to the requesting device 110, 120.If the original and converted versions of the web page 200 are storedand available (for example, the converted version of the web page 200may be created when the original version of the web page 200 wasoriginally published, or as a step in the editing process of theoriginal web page 200), the web server 100 uses the indicator (e.g., avalue or combination of values present within the device's user-agentstring) to determine whether to serve the original or converted versionof the web page 200 to the requesting device 110, 120. In that case, theURL visited by the requesting device 110, 120 will not change. Instead,different versions of the web page 200 will be served to the requestingdevice 110, 120 depending upon the type of requesting device 110, 120requesting the web page 200. If the web page 200 has not been previouslyconverted and stored, the web server 100 uses the indicator to determineif it is necessary to convert the web page 200 and serve the convertedversion to the requesting device 110, 120. In alternative embodiments,the original and converted versions of the web page 200 may be served atdifferent URLs. Either of the versions of the web page 200 may beaccessed directly by the requesting device 110, 120 by typing theassociated URL into the browser, or the web server 100 may detect thetype of requesting device 110, 120, the type of browser, or anotherindicator to determine whether to redirect the requesting device's 110,120 request to the original web page's 200 URL or the convertedversion's URL.

FIG. 2 illustrates an example web page 200 in its final graphicallayout. As depicted in FIG. 2, the web page 200 is suitable for displayon a requesting device having substantial resources, such as requestingdevice 110 of FIG. 1. If, however, the web page 200 were to be displayedon a requesting device having limited resources, such as a mobile phone,the web page 200 would not be displayed in a manner making the web page200 easily accessible to a user of the mobile device. For example,because web page 200 is relatively wide, if the entire width of the webpage 200 were to be displayed upon the screen of a mobile device, theweb page 200 would need to be depicted with relatively small font andimage size in order to fit all of the design elements on the mobiledevice's screen, making the content of the web page 200 difficult toread or view. If, however, the user were to zoom-in on a particularportion of the web page 200, in order to make reading of the text inthat portion more easily read, the web page 200 would become too largeto depict on the display of the mobile device. Consequently, whenzoomed-in, the user would need to pan the web page 200 both up and downand side-to-side in order to view all of the content of the web page200.

The example web page 200 includes a number of design elements, includingHTML paragraphs, text boxes, images, and shapes. The specific elementsof the example web page are identified below with reference to FIG. 4.When converting the web page 200 for display on a device having limitedresources, the conversion algorithm scans the elements of the web page200, including invisible elements such as HTML link elements andhyperlink elements that are attached to specific visible elements. Thoseelements can then be rearranged and/or otherwise modify to generate aweb page that can be more effectively displayed on the requestingdevice. In some cases, rather than analyze all the elements of the webpage 200, the conversion algorithm only analyzes and modifies thedisplay of visible elements of the web page 200 that must be moved toproperly display the web page on a requesting device with constrainedresources. Hyperlink elements can be treated as part of the element towhich the hyperlink is attached.

FIG. 3 is a flow chart illustrating an example method of converting theweb page 200 of FIG. 2 according to the conversion algorithm 105 fordisplay on a requesting device having constrained resources. FIGS. 4-9are illustrations demonstrating various ones of the steps of the methodof FIG. 3. At step 305, the web server identifies each design element401-412 to be processed in the conversion. In one embodiment, the webserver may identify the elements 401-412 by rendering the web page 200(for example, using a web browser engine or rendering engine) into afinal graphical layout, and then analyzing the final graphical layout asrendered to identify the elements. In another embodiment, the web servermay identify the elements 401-412 by retrieving identification andpositioning data regarding each element 401-412 from a storage location,such as a design database. In still another embodiment, the web servermay identify the elements 401-412 by analyzing the source code of theweb page 200 to retrieve parameters, such as HTML tags or CSSparameters, for each design element 401-412. The identified designelements 401-412 are then organized in order of decreasing height asthose elements would be display on the web page 200. The ordering of thedesign elements in the web page 200 is shown in FIG. 4, where eachelement is associated with a number from 1 to 12.

Height in this sense refers to the proximity of the top of an element401-412 to the top of the web page 200: the higher the element, thecloser that element is to the top of the web page 200. Most standardHTML elements, including text boxes, shapes, images, and tables, have agenerally rectangular boundary that defines the space the elementoccupies on the web page. The top of such elements is the edge of therectangular boundary that is closest to the top of the web page. Forelements that do not have such an outline, step 305 may include defininga rectangular boundary for the element and using that rectangularboundary to perform the conversion algorithm 105. Elements at the sameheight are ordered from left to right.

At step 310, illustrated in FIG. 5, the web server groups the elements401-412 into one or more element groups 501-505 according to a columnlayout. That is, the web server recognizes columnar, orvertically-aligned, arrangements of the elements 401-412 and attempts togroup vertically-aligned elements according to preset rules. In oneimplementation, starting from the highest element 401, the web serverscans below the element 401 for another element (e.g. element 404) thatmay be within a preset distance from the first element 401, such asabout 200 pixels. If the element 404 is within the distance, the webserver checks whether the element 404 is left-, right-, orcenter-aligned with the first element 401 within a preset tolerance,typically measured in number of pixels, such as about 20 pixels. If theelement 404 is so-aligned, the web server checks that the element 404 isnot wider than the first element 401 by a preset threshold, typicallymeasured in pixels, such as about 200 pixels.

Scanning according to these parameters allows the web server todetermine if it is contextually desirable to view the elements 401, 404in close vertical proximity to each other in the converted web page.Thus, if the element 404 meets these criteria, a group 501 is formedcontaining the groupable elements 401, 404. If the element 404 does notmeet these criteria, the element is a breaking element that terminatesscanning for the present column of elements. Setting the alignmenttolerance or width threshold too high or too low results in contextuallyinappropriate grouping or non-grouping of elements. Certain types ofelements may be considered breaking elements even if they meet thecriteria for grouping. For example, shape elements such as element 406may be excluded from grouping due to shapes having no contextual valuebeyond serving as a background for other elements, such as elements407-409. Shape elements may be treated by the web server as a breakingelement for the present group, or they may be ignored by the web serverin forming groups.

The web server continues scanning below each groupable element andadding elements to the group 501 until a breaking element (e.g., element406) or the bottom of the web page 200 is reached. The web server thenbegins scanning another column of elements, starting with thenext-highest element 402 that is not yet in a group. The web servercontinues scanning columns of elements and grouping groupable elementsuntil all ordered elements 401-412 are contained in a group 501-505 orare determined to be ungroupable. Thus, in the example web page 200,elements 401 and 404 are contained in a group 501, elements 402, 403,and 405 are contained in a group 502, elements 407 and 410 are containedin a group 503, elements 408 and 411 are contained in a group 504,elements 409 and 412 are contained in a group 505, and element 406cannot be grouped with any other elements.

At step 315, illustrated in FIG. 6, each group 501-505 and eachungrouped element 406 is moved, in order of descending height, towardthe left side of the web page 200. Movement continues until the leftside of the group or ungrouped element being moved contacts the leftside of the web page or the right side of another group or ungroupedelement. When another group or ungrouped element is contacted, at step320 the moving group is placed below the group that is contacted andmoved to the left side of the web page 200. See FIG. 7. This givespriority positioning to the left-most group among a plurality of groupsat the same height. The grouping and movement of steps 305-320 convertsa multiple-column layout into a single-column layout 700 without loss ofcontext or of informational and functional value of the content.

At step 325, illustrated in FIG. 8, the web server separates overlappingelements within each group and among the ungrouped elements. An elementoverlaps another element if some or all of the area within itsrectangular boundary occupies the same pixels as the area of theoverlapped element. In the example group 800 of FIG. 8, elements 805 and815 each overlap element 810. To separate the elements 805-815, the webserver determines the vertical midpoint of each element 805-815,delineated by lines A-A, B-B, and C-C, respectively. Between twooverlapping elements, the web server determines which element is higher,then determines which element's vertical midpoint is higher. If thehigher of the two elements has a lower vertical midpoint than the lowerof the two elements, as in elements 805 and 810, the lower element isseparated from the higher element by placing the lower element above thehigher element. If the higher of the two elements has a higher verticalmidpoint than the lower of the two elements, as in elements 810 and 815,the lower element is placed below the higher element.

At step 330, the web server renders the elements 401-412 into containersaccording to the alignment of their groups 501-505 or ungroupedpositioning. The rendering includes generating the source code for theconverted web page as it will be displayed on the requesting device. SeeFIG. 9. The rendered containers are formatted according to preset rules.The rules include general rendering instructions and may further includeexceptions to the general rules to accommodate particular types ofdesign elements. In one implementation, the general rules includerequirements that each container is center-aligned and has a maximumwidth equal to the width of the requesting device's display. The rulesmay further include several exceptions. A container for text elements,such as text boxes and paragraphs, has the same width as the display,regardless of the original width of the contained text elements. Alltext may be capped at a maximum or minimum size, with the text sizebeing changed accordingly before rendering. Shape elements, such aselement 406 of the example web page 200, are not directly rendered tothe converted web page; the shape element is removed from the renderingflow and is instead rendered as a background for any element thatcompletely overlaps the shape element in the original web page 200. Incontrast, horizontal line elements are identified and rendered as anyother visible element. Vertical line elements may be rendered if the webserver identifies them as dividers between other rendered elements in agroup. Navigation elements that are identified as primary navigation, asdescribed below, are removed from the rendering flow.

At step 335, illustrated in FIG. 9, the web server 100 may set theprimary navigation interface 905 to be displayed on the converted webpage 900. The primary navigation interface includes one or more primarynavigation elements 906-908. The primary navigation elements are asubset of all navigation elements on the web page 200. A navigationelement is a hyperlinking element, such as an image or text selectionthat is tagged to take the user to another web page in the website whenclicked (with a mouse input interface) or tapped (with a touch-screeninterface). The primary navigation elements 906-908 are identified byidentifying all navigation elements on the web page 200 and determining,by scanning the other pages in the website, which of the navigationelements are the most visible across the entire website. Navigationvisibility refers to the frequency of appearance of the navigationelement on all web pages in the website. The primary navigation elementsare the most visible navigation elements. For many web sites, forexample, the listing of primary navigation elements may include a ‘home’link, a ‘search’ link, an ‘about us’ link, a ‘contact us’ link, and thelike. The web page 200 may include any number of primary navigationelements. In some cases, however the number of primary navigationelements is limited to a fixed number of elements, such as five. In thatcase, the five most often occurring navigation elements are selected forinclusion in the listing of primary navigation elements.

The primary navigation elements 906-908 are removed from the normalrendering of the converted web page 900, as described above. The primarynavigation elements 906-908 are inserted into the primary navigationinterface 905. The primary navigation interface 905 is rendered at thetop or another target area of the converted web page 900, in some casesas a static element that does not scroll with the rest of the convertedweb page 900. In order to conserve display space that is allotted to therendered content, there may be a limit on the number of primarynavigation elements 906-908 that are always displayed in the primarynavigation interface 905. In one implementation, three primarynavigation elements 906-908 are displayed at all times. The rest of theprimary navigation elements may be made accessible through alist-expanding element 909. Selecting the list-expanding element 909will cause the requesting device to display a list of additionalnavigation elements, which may include primary and non-primarynavigation elements. So that it is always visible, a link to the “Home”web page may be separately rendered to the display or made accessible byclicking a button or performing another action supported by the generaluser interface of the requesting device.

Referring again to FIG. 9, the converted web page 900 has asingle-column format featuring the primary navigation interface 905 atthe top and the visible element groups 501-505 stacked in order of thegroups' 501-505 priority on the original web page 200. In particular,the conversion method retains the contextual priority of elements on theoriginal web page 200 regardless of the original web page's 200 layout.The groups 501-505 are rendered in containers of equal width in order toprovide a consistent display on the requesting device with constrainedresources 120. The preferred format of the converted web page 900provides effective conveyance of the functional and informationalcontent of the original web page 200, while also providing easy viewingand touch-screen manipulation on mobile devices.

With reference again to FIGS. 2 and 9, in some embodiments the originalweb page 200 may be populated with one or more visible or invisiblestandard informational elements (not shown) which it may be desirable tocopy to the converted web page 900 at some point in the conversionalgorithm. The standard informational elements may include designelements such as raw text, text fields, text boxes, hyperlinked graphicbuttons, and the like, which convey desired identifying and contactinformation. The information to be conveyed may depend on the goals ofthe website owner. For example, a business may wish the standardinformational elements to convey the business name, address, and phonenumber, while an individual may wish the standard informational elementsto convey only his name or an online alias by which he is known. Theinformation to be conveyed may further include social connectors that,when clicked by a website visitor, may automatically connector thevisitor with one or more of the website owner's social networkpresences, such as a FACEBOOK or GOOGLE+ profile, TWITTER account,BLOGGER blog, or GOOGLE PLACES or YELP listing. Collectively, theinformation to be conveyed may be referred to as NAPSOC (“Name, Address,Phone number, SOCial connectors”) data.

Referring to FIG. 10, the original web page may be built using a websitebuilder software tool having an interface 1000 that prompts for entry ofthe business' NAPSOC data. The website builder may, upon entry of someor all of the NAPSOC data, identify one or more of the business' socialnetworking accounts and provide a request box 1010 prompting thebusiness to permit the website builder to insert the social connectorsinto the original web page. In one embodiment, the business may enterits account information, such as its TWITTER name or FACEBOOK page URL,and the website builder may use the account information to identify thecorresponding accounts. In another embodiment, the website builder maysearch for relevant social connectors based only on the business' name,address, or other data such as business type. If the business givespermission, the website builder adds hyperlinked buttons to the relevantsocial network presences as design elements on the original web page.The web server may then process the hyperlinked buttons as any otherdesign element according to the conversion algorithm described above.Alternatively, the web server may designate the social connectorhyperlinked buttons as primary navigation elements and may insert themat the top of the converted web page. When using a website builder toconstruct a website, a mobile version of the website may be prepared inaccordance with the method depicted in FIG. 3 at the time the website ispublished. Alternatively, if the builder allows a particular website tobe exported, at that time the user may select to export a mobile versionof the website, where the mobile version of the web pages making up thewebsite have been prepared in accordance with the method described inFIG. 3.

In general, the conversion algorithm described above rearranges thelayout of certain web page elements in order to be more accessible to atarget device. Although the approach generally improves the readabilityand accessibility of a web page, in some cases a web page designer maynot want a web page, or certain parts of a web page, to be modifiedpursuant to the present conversion algorithm. As such, certainindicators, such as database flags, HTML tags, or other code tags, maybe defined that cause the conversion algorithm to not be performed oncertain regions of a web page. For example, a web page may include aheader that includes a number of carefully positioned image segmentsthat, when pieced together form a larger image. If the image segmentswere to be re-arranged, the segments of the larger image could becomedisorganized. Accordingly, the portion of the web page making up theheader image may be marked in a database storing the original web page200 layout as excluded from conversion, or may be wrapped in the sourcecode with a certain tag pair (e.g., <no-conversion> and</no-conversion>) indicating that the header portion of the web pageshould not be rearranged pursuant to the present method. In anotherexample, the designer may intend certain elements to overlap on the webpage 200. The designer may mark these elements as overlapping, asdescribed above, to instruct the web server to skip the separation step325. See FIGS. 3 and 8. In this manner, web page designers can haveprecise control over the portions of their websites that may be modifieddepending upon the capabilities of the requesting device.

The schematic flow chart diagrams included are generally set forth aslogical flow-chart diagrams. As such, the depicted order and labeledsteps are indicative of one embodiment of the presented method. Othersteps and methods may be conceived that are equivalent in function,logic, or effect to one or more steps, or portions thereof, of theillustrated method. Additionally, the format and symbols employed areprovided to explain the logical steps of the method and are understoodnot to limit the scope of the method. Although various arrow types andline types may be employed in the flow-chart diagrams, they areunderstood not to limit the scope of the corresponding method. Indeed,some arrows or other connectors may be used to indicate only the logicalflow of the method. For instance, an arrow may indicate a waiting ormonitoring period of unspecified duration between enumerated steps ofthe depicted method. Additionally, the order in which a particularmethod occurs may or may not strictly adhere to the order of thecorresponding steps shown.

As a non-limiting example, the steps described above (and all methodsdescribed herein) may be performed by any central processing unit (CPU)or processor in a computer or computing system, such as a microprocessorrunning on a server computer, and executing instructions stored (perhapsas applications, scripts, apps, and/or other software) incomputer-readable media accessible to the CPU or processor, such as ahard disk drive on a server computer, which may be communicativelycoupled to a network (including the Internet). Such software may includeserver-side software, client-side software, browser-implemented software(e.g., a browser plugin), and other software configurations.

The present invention has been described in terms of one or morepreferred embodiments, and it should be appreciated that manyequivalents, alternatives, variations, and modifications, aside fromthose expressly stated, are possible and within the scope of theinvention.

We claim:
 1. A system, comprising: a processor configured to: receive,via an electronic communications network, a message encoding a requestfor a web page, the message being received from a device; determine auser-agent string for the device; render, using the user-agent string,the web page into a converted web page suitable for display on thedevice; and transmit, using the electronic communications network, theconverted web page to the device for display.
 2. The system of claim 1,wherein the device is a mobile device.
 3. The system of claim 2, whereinthe processor is configured to determine at least one of an operatingsystem and a central processing unit of the mobile device using theuser-agent string.
 4. The system of claim 1, wherein the processor isconfigured to, when rendering the web page into the converted web page:identify design elements in a graphical representation of the web page;order the design elements according to a position of each of the designelements with respect to a top of the graphical representation of theweb page; group one or more of the ordered design elements into one ormore groups of design elements; stack the design elements by rearrangingeach group of design elements into a single column; and render thesingle column of the groups of design elements into the converted webpage for display on the device.
 5. The system of claim 4, wherein one ormore of the design elements is positioned on the web page using absolutepositioning.
 6. The system of claim 4, wherein each group of designelements includes design elements that are vertically aligned with eachother in the graphical representation of the web page, and are within athreshold width variation of each other.
 7. The system of claim 6,wherein the threshold width variation is 20 pixels.
 8. The system ofclaim 7, wherein the groups of design elements are stacked in order ofproximity to the top of the graphical representation of the web.
 9. Thesystem of claim 1, wherein the processor is configured to identify atleast one tag within the web page identifying static content that is notto be converted and wherein rendering the web page into the convertedweb page includes not modifying the static content.
 10. The system ofclaim 9, wherein the static content include at least a portion of aheader image of the web page.
 11. A non-transitory computer-readablestorage media storing instructions that, when executed by at least onecomputing device, cause the at least one computing device to: receive,via an electronic communications network, a message encoding a requestfor a web page, the message being received from a device; determine anattribute of the device; render, using the attribute of the device, theweb page into a converted web page suitable for display on the device;and transmit, using the electronic communications network, the convertedweb page to the device for display.
 12. The non-transitorycomputer-readable storage media of claim 11, wherein the device is amobile device.
 13. The non-transitory computer-readable storage media ofclaim 12, wherein the instructions are configured to cause the at leastone computing device to determine at least one of an operating systemand a central processing unit of the mobile device using a user-agentstring of the mobile device.
 14. The non-transitory computer-readablestorage media of claim 11, wherein the instructions are configured tocause the at least one computing device to, when rendering the web pageinto the converted web page: identify design elements in a graphicalrepresentation of the web page; order the design elements according to aposition of each of the design elements with respect to a top of thegraphical representation of the web page; group one or more of theordered design elements into one or more groups of design elements;stack the design elements by rearranging each group of design elementsinto a single column; and render the single column of the groups ofdesign elements into the converted web page for display on the device.15. The non-transitory computer-readable storage media of claim 14,wherein one or more of the design elements is positioned on the web pageusing absolute positioning.
 16. The non-transitory computer-readablestorage media of claim 14, wherein each group of design elementsincludes design elements that are vertically aligned with each other inthe graphical representation of the web page, and are within a thresholdwidth variation of each other.
 17. The non-transitory computer-readablestorage media of claim 16, wherein the threshold width variation is 20pixels.
 18. The non-transitory computer-readable storage media of claim17, wherein the groups of design elements are stacked in order ofproximity to the top of the graphical representation of the web.
 19. Thenon-transitory computer-readable storage media of claim 11, wherein theinstructions are configured to cause the at least one computing deviceto identify at least one tag within the web page identifying staticcontent that is not to be converted and wherein rendering the web pageinto the converted web page includes not modifying the static content.20. The non-transitory computer-readable storage media of claim 19,wherein the static content include at least a portion of a header imageof the web page.